<template>
  <v-card class="mx-auto">
    <v-card-title>语音播报模板配置</v-card-title>
    <v-card-text>
      <v-row dense>
        <v-col cols="3">
          <ReportTargetSelector
            v-model="localClassifyAnalyse.report_target"
          ></ReportTargetSelector>
        </v-col>
        <v-col cols="3">
          <HandSideEnumSelector
            v-model="localClassifyAnalyse.handside"
          ></HandSideEnumSelector>
        </v-col>
        <v-col cols="3">
          <FingerIndexEnumSelector
            v-model="localClassifyAnalyse.finger_index"
          ></FingerIndexEnumSelector>
        </v-col>
        <v-col cols="3">
          <FingerClassifyEnumSelector
            v-model="localClassifyAnalyse.finger_zh_class"
          ></FingerClassifyEnumSelector>
        </v-col>
      </v-row>
      <v-row dense>
        <v-switch
          v-model="localClassifyAnalyse.is_intro"
          :label="`是否为前面介绍: ${localClassifyAnalyse.is_intro.toString()}`"
        ></v-switch>
      </v-row>
      <v-row dense>
        <v-col cols="12">
          <RichTextEditor
            v-model="localClassifyAnalyse.content"
            @update:contentText="localClassifyAnalyse.content_text = $event"
          >
          </RichTextEditor>
        </v-col>
        <v-col cols="12">
          <AudioUploader
            v-model="localClassifyAnalyse.audio"
            parent_dir="fingerconfig"
            label="可选，语音播报"
          ></AudioUploader>
        </v-col>
      </v-row>
    </v-card-text>
    <v-card-actions>
      <v-btn color="grey" small @click.stop="$emit('cancel')">取消</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="primary" small @click.stop="onSave">保存</v-btn>
      <v-btn color="primary" small @click.stop="onFinishEdit">保存&关闭</v-btn>
    </v-card-actions>
  </v-card>
</template>

<script>
  // 编辑功能
  // emit cancel和finish

  import FingerClassifyEnumSelector from "../FingerClassifyEnumSelector"
  import FingerIndexEnumSelector from "../FingerIndexEnumSelector"
  import HandSideEnumSelector from "../HandSideEnumSelector"
  import ReportTargetSelector from "../ReportTargetSelector"
  import AudioUploader from "@/components/file/AudioUploader"
  import RichTextEditor from "@/components/RichTextEditor"

  import { ClassifyAnalyseConfig } from "@/store/models/finger_config"
  import merge from "lodash/merge"

  export default {
    name: "ClassifyAnalyseConfigEditor",
    components: {
      RichTextEditor,
      FingerClassifyEnumSelector,
      HandSideEnumSelector,
      FingerIndexEnumSelector,
      ReportTargetSelector,
      AudioUploader,
    },
    props: {
      ClassifyAnalyse: Object,
    },
    data: () => ({
      localClassifyAnalyse: new ClassifyAnalyseConfig(),
    }),
    computed: {
      onAdding() {
        return !this.ClassifyAnalyse.id || this.ClassifyAnalyse.id == 0
      },
    },
    watch: {
      ClassifyAnalyse: {
        handler(val) {
          if (val) {
            this.localClassifyAnalyse = merge(new ClassifyAnalyseConfig(), val)
          }
        },
        deep: true,
        immediate: true,
      },
    },
    methods: {
      onFinishEdit() {
        this.$dialog.confirm({
          text: "确定要保存到服务器",
          title: "警告",
          waitForResult: true,
          actions: {
            false: {
              text: "取消",
              color: "blue",
            },
            true: {
              text: "确定",
              color: "red",
              handle: () => {
                return this.localClassifyAnalyse
                  .createOrUpdate()
                  .then((res) => {
                    this.$emit("finish", res)
                    return
                  })
              },
            },
          },
        })
      },
      onSave() {
        this.localClassifyAnalyse.createOrUpdate().then((res) => {
          return
        })
      },
    },
  }
</script>
